<template>
  <a-card :bordered="false" class="goods_list_add">
    <el-page-header @back="$router.go(-1)" style="margin-bottom: 10px"></el-page-header>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :labelWidth="labelWidth" class="demo-ruleForm">
      <!-- 基本信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="所属业态：">
              <span style="color: red">{{ this.$route.query.businessType | businessType }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8">
            <el-form-item label="供应商名称：" prop="supplierMerchantId">
              <a-select
                v-model="ruleForm.supplierMerchantId"
                placeholder="请选择供应商名称"
                :disabled="disabled"
              >
                <a-select-option
                  :value="item.value"
                  v-for="(item,index) in supplierMerchantIdList"
                  :key="index"
                >{{item.label}}</a-select-option>
              </a-select>
            </el-form-item>
          </el-col>-->
          <el-col :xs="8">
            <el-form-item label="商品名称：" prop="goodsName">
              <a-input
                v-model="ruleForm.goodsName"
                placeholder="请输入商品名称，不超过30个字符"
                :disabled="disabled"
                style="width: 30%"
                :maxlength="100"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8">
            <el-form-item label="商品条码：" required>
              <el-col :span="2">
                <el-form-item prop="sptm">
                  <a-select
                    v-model="ruleForm.sptm"
                    :disabled="disabled"
                    @change="sptmChange"
                    style="width:100%"
                  >
                    <a-select-option :value="0">无</a-select-option>
                    <a-select-option :value="1">有</a-select-option>
                  </a-select>
                </el-form-item>
              </el-col>
              <el-col :span="22" style="padding-right:0" v-if="ruleForm.sptm == 1">
                <el-form-item prop="barCode">
                  <a-input
                    v-model="ruleForm.barCode"
                    placeholder="请输入商品条码"
                    v-show="ruleForm.sptm == 1"
                    :disabled="disabled"
                    style="width:23%"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>-->
          <el-col :xs="8">
            <el-form-item label="商品条码：" prop="barCode">
              <a-input
                v-model="ruleForm.barCode"
                placeholder="请输入商品条码"
                :disabled="disabled"
                style="width: 30%"
                :maxlength="100"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8">
            <el-form-item label="商品来源：">
              <a-select
                v-model="ruleForm.goodsSource"
                placeholder="请选择商品来源"
                @change="goodsSourceChange"
                style="width:30%"
              >
                <a-select-option
                  v-for="item in lgoodsSourceList"
                  :key="item.value"
                  :value="item.value"
                >{{item.label}}</a-select-option>
              </a-select>
            </el-form-item>
          </el-col>-->
          <el-col :xs="8">
            <!-- @popupVisibleChange="popupVisibleChange" -->
            <el-form-item label="商品类目：" prop="pid">
              <a-cascader
                :options="categoryIdList"
                v-model="ruleForm.pid"
                :disabled="disabled"
                style="width: 30%"
                placeholder="请选择商品类目"
              ></a-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品图片：" :required="$route.query.businessType == '02'?false:true">
              <div class="upload_list clearfix">
                <div :key="item.uid" v-for="(item, index) in fileList">
                  <el-image class="imgs" :src="item.url" alt :preview-src-list="fileListUrl"></el-image>
                  <div>
                    <a-button type="link" size="small" v-if="index != 0" @click="setMaster(item)">设为主图</a-button>
                    <a-button type="link" size="small" style="color: #000" v-else>主图</a-button>
                    <a-button type="link" size="small" @click="delUplod(item)">删除</a-button>
                  </div>
                </div>
                <a-upload
                  name="file"
                  listType="picture-card"
                  class="avatar-uploader"
                  :showUploadList="false"
                  :beforeUpload="beforeUpload"
                  action="/admin/sys-file/upload"
                  :headers="headers"
                  @change="handleChange"
                  :disabled="disabled"
                >
                  <div v-if="fileList.length < 6">
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">点击上传</div>
                  </div>
                </a-upload>
              </div>
              <div>建议上传大小不超过10M，尺寸为 200 * 200的图片，最多6张图，默认首图为主图</div>
              <!-- modal -->
              <cropper-modal ref="cropperModal" :optionsData="optionsData" @ok="handleCropperSuccess"></cropper-modal>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品描述：" prop="goodsDes">
              <a-input
                v-model="ruleForm.goodsDes"
                placeholder="请填写商品描述"
                type="textarea"
                :disabled="disabled"
                style="width: 30%"
                :maxlength="200"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="库存单位：" prop="stockUnit">
              <a-select v-model="ruleForm.stockUnit" placeholder="请选择库存单位" style="width: 30%">
                <a-select-option
                  :value="item.label"
                  v-for="(item, index) in stockUnitList"
                  :key="index"
                  :disabled="disabled"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="库存换算：" required>
              <el-col :span="2">
                <el-form-item>
                  <a-input-number id="inputNumber" v-model="danwei" :min="1" style="width: 100%" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="2" style="padding-right: 0">
                <el-form-item prop="convertUnit">
                  <a-select v-model="ruleForm.convertUnit" :disabled="disabled">
                    <a-select-option
                      :value="item.label"
                      v-for="(item, index) in stockUnitList"
                      :key="index"
                      :disabled="disabled"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="padding-right: 0; text-align: center">=</el-col>
              <el-col :span="2" style="padding-right: 0">
                <el-form-item prop="convertUnitNum">
                  <a-input-number
                    id="inputNumber"
                    v-model="ruleForm.convertUnitNum"
                    :min="1"
                    style="width: 100%"
                    :disabled="disabled"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="stockUnit">
                  <a-select v-model="ruleForm.stockUnit">
                    <a-select-option
                      :value="item.label"
                      v-for="(item, index) in stockUnitList"
                      :key="index"
                      :disabled="disabled"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 服务信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false" v-if="$route.query.businessType == '04'">
        <span slot="title">服务信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="服务时长：" prop="serviceDuration">
              <a-select
                v-model="ruleForm.serviceDuration"
                :disabled="disabled"
                style="width: 15%"
                @change="serviceDurationChange"
              >
                <a-select-option v-for="(item, index) in serviceDurationList" :key="index" :value="item.value">{{
                  item.label
                }}</a-select-option>
              </a-select>
              <span style="padding-left: 5px">小时</span>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="服务时段：" prop="service">
              <a-checkbox-group v-model="ruleForm.service" @change="$forceUpdate()" :disabled="disabled">
                <!-- <a-checkbox label="全部" value="全部"></a-checkbox> -->
                <a-checkbox v-for="(i, index) in serviceTimesList" :key="index" name="type" :value="i.value">{{
                  i.label
                }}</a-checkbox>
              </a-checkbox-group>
              <span v-if="!ruleForm.serviceDuration">请选择服务时长</span>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 销售信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">销售信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :md="6" :xs="12" :sm="8">
            <el-form-item label="销售价：" prop="sellingPrice">
              <a-input
                v-model="ruleForm.sellingPrice"
                type="number"
                addon-after="元"
                @blur="toDecimalBlur('xsj')"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :md="6" :xs="12" :sm="8">
            <el-form-item label="成本价：" prop="costPrice">
              <a-input
                v-model="ruleForm.costPrice"
                type="number"
                addon-after="元"
                @blur="toDecimalBlur('cbj')"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :md="6" :xs="12" :sm="8">
            <el-form-item label="促销价：" prop="promotePrice">
              <a-input
                v-model="ruleForm.promotePrice"
                type="number"
                addon-after="元"
                @blur="toDecimalBlur('cxj')"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :md="6" :xs="12" :sm="8">
            <!-- v-if="ruleForm.stockNum && soldOut" -->
            <el-form-item label="库存数量：" prop="stockNum">
              <a-input
                v-model.number="ruleForm.stockNum"
                placeholder="请输入请输入大于0的整数"
                :min="0"
                @blur="toDecimalBlur('kcsl')"
                :disabled="disabled"
                type="number"
              />
              <!-- <span v-else>已售罄</span> -->
            </el-form-item>
          </el-col>
          <el-col :md="12" :xs="12" :sm="8">
            <el-form-item label="销售状态：" prop="saleScope">
              <a-radio-group v-model="ruleForm.saleState" :disabled="disabled">
                <a-radio value="00">停售</a-radio>
                <a-radio value="01">销售中</a-radio>
                <a-radio value="02">已售罄</a-radio>
              </a-radio-group>
            </el-form-item>
          </el-col>
          <el-col :md="6" :xs="12" :sm="8">
            <el-form-item label="毛利：">
              <el-col>
                <!-- <el-form-item>{{ ruleForm.grossProfit }}元</el-form-item> -->
                <!-- <el-form-item>{{ ruleForm.grossProfit }}元</el-form-item> -->
                <a-input v-model="ruleForm.grossProfit" type="number" addon-after="元" :disabled="true" />
              </el-col>
            </el-form-item>
          </el-col>

          <el-col :md="6" :xs="12" :sm="8">
            <el-form-item label="毛利率：">
              <el-col>
                <!-- <el-form-item>{{ ruleForm.grossProfitRate }}%</el-form-item> -->
                <a-input v-model="ruleForm.grossProfitRate" type="number" addon-after="%" :disabled="true" />
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 商品规格 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">商品规格</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="商品类型：">
              <a-select
                v-model="ruleForm.typeId"
                :disabled="disabled"
                placeholder="请选择商品类型"
                @change="typeIdChange"
                allowClear
                style="width: 50%"
              >
                <a-select-option :value="item.value" v-for="(item, index) in typeIdList" :key="index">{{
                  item.label
                }}</a-select-option>
              </a-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item
              :label="item.goodsAttributeName"
              v-for="(item, index) in typeIdAttribute"
              :key="index"
              :rules="[{ required: true, message: '请选择类型属性', trigger: 'change' }]"
            >
              <a-checkbox-group v-model="item.valueList" :disabled="disabled" @change="changeHandler">
                <a-checkbox :value="i.value" v-for="(i, index1) in item.goodsAttributeValues" :key="index1">{{
                  i.label
                }}</a-checkbox>
              </a-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 商品参数 -->
      <!-- <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false" >
        <span slot="title">商品参数</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="产地：" prop="cd">
              <a-input v-model="ruleForm.cd" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="材质：" prop="cz">
              <a-input v-model="ruleForm.cz" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="风格：" prop="tq">
              <a-radio-group v-model="ruleForm.tq" :disabled="disabled">
                <a-radio :value="i.value" v-for="i in tqList" :key="i.value">{{i.label}}</a-radio>
              </a-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="版型：" prop="jj">
              <a-checkbox-group v-model="ruleForm.jj" :disabled="disabled">
                <a-checkbox :value="i.value" v-for="i in jjList" :key="i.value">{{i.label}}</a-checkbox>
              </a-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>-->

      <!-- 销售渠道 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">销售渠道</span>
        <el-row :gutter="10" slot="table">
          <!-- <el-col :xs="8">
            <el-form-item label="是否门店商品：" prop="mdsp">
              <a-radio-group v-model="ruleForm.mdsp" :disabled="disabled">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
                <span
                  style="color:#ff4d4f"
                >默认选择否，则商品为公共商品支持在多个门店售卖，默认选择全部门店 如选择是，则表示此商品为特殊的门店商品只能在某个门店售卖。</span>
              </a-radio-group>
            </el-form-item>
          </el-col>-->
          <el-col :xs="8">
            <el-form-item label="销售渠道：" prop="saleScope">
              <a-radio-group v-model="ruleForm.saleScope" :disabled="disabled">
                <a-radio value="00">全部渠道</a-radio>
                <a-radio value="01">仅线上</a-radio>
                <a-radio value="02">仅线下</a-radio>
              </a-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8">
            <el-form-item label="选择门店：">
              <el-cascader
                :options="mendianList"
                v-model="ruleForm.mendian"
                :props="{multiple:true}"
                clearable
                style="width:100%"
              ></el-cascader>
            </el-form-item>
          </el-col>-->
        </el-row>
      </com-title>

      <!-- 销售设置 -->
      <!-- <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false" >
        <span slot="title">销售设置</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="是否促销商品：" prop="cxsp">
              <a-radio-group v-model="ruleForm.cxsp" :disabled="disabled">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
                <span style="color:#ff4d4f">
                  默认选择否，则商品为销售价售卖；
                  如选择是，则表示此商品在促销时间内以促销价格售卖。
                </span>
              </a-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="促销时间：">
              <a-range-picker
                v-model="ruleForm.cxsj"
                :disabled="disabled"
                show-time
                style="width:100%"
                format="YYYY-MM-DD HH:mm:ss"
                @change="cxsjChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>-->

      <!-- 商品详情 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">商品详情</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="商品详情：" prop="goodsDetails">
              <QuillEditor
                :value="ruleForm.goodsDetails"
                :myQuillEditor="'myQuillEditor'"
                @editorChange="editorChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>
      <div class="content">
        <a-button type="primary" @click="submitSave('ruleForm')" v-if="!this.$route.query.details">提交并保存</a-button>
        <!-- <a-button @click="save('ruleForm')">保存</a-button> -->
        <a-button @click="quxiao('ruleForm')">取消</a-button>
      </div>
    </el-form>
  </a-card>
</template>

<script src='./goods_list_add.js'></script>

<style lang="less">
.goods_list_add {
  .avatar-uploader > .ant-upload {
    width: 150px;
    height: 150px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .upload_list {
    & > div {
      float: left;
      margin-right: 10px;
      margin-top:10px;
      & > .imgs {
        width: 150px;
        height: 130px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      & > div {
        width: 150px;
        margin-bottom: 0;
        text-align: center;
        background-color: #fafafa;
        display: flex;
        justify-content: center;

        span {
          padding-right: 10px;
          cursor: pointer;
        }
      }
    }
    .avatar-uploader {
      float: left;
      margin-top:10px
    }
  }
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
  .ant-checkbox-wrapper {
    margin-left: 8px !important;
    width: 140px;
  }
}
</style>
